<template>
  <div class="BetweenDepartments">
    <div class="pubBig keQu">
      <div class="h0">
        <p class="lt"></p>
      </div>
      <div class="m0">
        <div class="form-group">
          <p>
            <!-- <button class="btn btn-success" @click="addKs2Bq()">设定</button> -->
            <button
              class="btn btn-danger"
              v-if="false"
            >撤销</button>
          </p>
          <p style="float: right">
            <label>病区查询：</label>
            <input
              type="text"
              class="form-control"
              style="width: 160px"
              v-model="jm"
            />
            <button
              class="btn btn-default"
              @click="queryz_bq()"
            >查询</button>
          </p>
        </div>
      </div>
      <div class="mContent">
        <div class="ltList">
          <p class="p1">病区</p>
          <div>
            <el-tree
              :data="model_query_bq"
              @node-click="handleNodeClick"
              :props="defaultProps"
              node-key="id"
            >
              <span
                class="custom-tree-node"
                slot-scope="{ node, data }"
              >
                <span style="width: 100px">{{ node.label }}</span>
                <span
                  style
                  v-if="data.type=='1'"
                >
                  <el-button
                    type="text"
                    size="mini"
                    @click="() => remove(node, data)"
                  >删除</el-button>
                </span>
              </span>
            </el-tree>
          </div>
        </div>
        <div class="rtList">
          <p class="p1">科室</p>

          <el-table
            ref="multipleTable"
            :data="model_query_ks"
            tooltip-effect="dark"
            :row-style="rowClass"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
            ></el-table-column>

            <el-table-column
              prop="id"
              label="科室编码"
              width="220"
            ></el-table-column>
            <el-table-column
              prop="name"
              label="科室名称"
              show-overflow-tooltip
            ></el-table-column>
          </el-table>
        </div>
        <button
          class="btn uuu"
          @click="addKs2Bq()"
        >对照</button>
      </div>
    </div>
  </div>

</template>
<script>
export default {
  name: "Bedinformation",
  data () {
    return {
      msg: "SystemManagement 下的 Bedinformation",
      model_operation_levelc: "",
      //
      model_id: "", //序号
      model_section: "", //科室代码
      model_ward_id: "", //病区代码

      //下拉框
      model_select_id: [], //序号
      model_select_section: [], //科室代码
      model_select_ward_id: [], //病区代码
      //
      model_select_ward_idC: "",

      model_jmC: "",
      model_query: [], //查询结果
      model_query_ks: [], //查询结果2
      model_query_bq: [],
      changeSelectStyle: "",

      bed_info: {
        columns: [
          { field: "hospital_id", title: "医院编号" },
          { field: "code", title: "床位编码" },
          { field: "section_id", title: "科室代码" },
          { field: "ward_id", title: "病区代码" },
          { field: "room_no", title: "房间号" },
          { field: "id", title: "床位号" },
          { field: "name", title: "床位名称" },
          { field: "bed_status", title: "床位状态" },
          { field: "patient_id", title: "当前住院号" }
        ],
        data: []
      },
      currentPage: 1,
      total: 0,
      pagesize: 13,
      //    ********************************************
      data: [
        {
          type: "0",
          BQid: 1,
          label: "病区一",
          children: [
            {
              type: "1",
              id: 3,
              label: "科室一",
              disabled: true
            },
            {
              type: "1",
              id: 2,
              label: "科室二",
              disabled: true
            }
          ]
        },
        {
          type: "0",
          BQid: 1,
          label: "病区二",
          children: [
            {
              type: "1",
              id: 3,
              label: "科室一",
              disabled: true
            },
            {
              type: "1",
              id: 2,
              label: "科室二",
              disabled: true
            }
          ]
        }
      ],
      defaultProps: {
        children: "sections",
        label: "name"
      },
      //选中病区
      ward: null,
      deptList: [],
      deptIDList: [],
      jm: ""
    };
  },
  methods: {
    handleNodeClick (data, node, self) {
      console.log("选中病区：");
      console.log(data);
      this.ward = data;
    },
    handleSelectionChange (val) {
      this.deptList = val;
      console.log("选中科室：");
      console.log(val);
    },
    rowClass ({ row, rowIndex }) {
      //选中行样式
      if (this.index === rowIndex) {
        return { color: "#fff", "background-color": "#155a00" };
      }
    },
    remove (node, data) {
      this.deleteKs2Bq(data.id);
      const parent = node.parent;
      const children = parent.data.sections || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      console.log("删除科室");
      console.log(data);
      children.splice(index, 1);
    },
    queryz_bq () {
      this.model_query_bq = [];
      var data = {
        model: "11.综合维护-病区与科室关系",
        code: "11112",
        input: {
          jm: this.jm
        }
      };
      console.log(data);
      this.$post("CloudHIS/Business_Handle", data)
        .then(res => {
          //this.total = res.data.totalCount;
          this.model_query_bq = res.data;
          console.log("病区绑定查询结果");
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    },
    queryz_ks () {
      this.model_query_ks = [];
      var data = {
        model: "11.综合维护-病区与科室关系",
        code: "11114",
        input: {
          jm: "",
          section_class: "-1", //科室类型
          flag: "-1" //是否使用标志
        }
      };
      console.log(data);
      this.$post("CloudHIS/Business_Handle", data)
        .then(res => {
          this.total = res.data.totalCount;
          this.model_query_ks = res.data;
          console.log("科室列表查询结果");
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    },
    addKs2Bq () {
      if (this.ward == null) {
        this.$message({
          showClose: true,
          message: "请选择病区！",
          type: "error"
        });
        return;
      }
      if (this.deptList.length == 0) {
        this.$message({
          showClose: true,
          message: "请选择关联科室！",
          type: "error"
        });
        return;
      }
      this.deptIDList = [];
      this.deptList.forEach(e => {
        this.deptIDList.push(e.id);
      });
      console.log(this.deptIDList);
      var data = {
        model: "11.综合维护-病区与科室关系",
        code: "11111",
        input: {
          section: this.deptIDList,
          ward: this.ward.id
        }
      };
      console.log(data);
      this.$post("CloudHIS/Business_Handle", data)
        .then(res => {
          console.log("绑定结果");
          console.log(res);
          this.ward = null;
          this.deptList = [];
          this.queryz_bq();
          this.toggleSelection();
        })
        .catch(err => {
          console.log(err);
        });
    },
    deleteKs2Bq (ksid) {
      var data = {
        model: "11.综合维护-病区与科室关系",
        code: "11113",
        input: {
          section: ksid,
          ward: this.ward.id
        }
      };
      console.log(data);
      this.$post("CloudHIS/Business_Handle", data)
        .then(res => {
          console.log("删除结果");
          console.log(res);
          this.queryz_bq();
        })
        .catch(err => {
          console.log(err);
        });
    },
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    }
    /*************************************************************/
  }, //
  created () {
    if (this.$route.query.Token) {
      localStorage.setItem('Token', this.$route.query.Token)
    }
    this.msg = this.$route.query;
    // this.queryz();
    this.queryz_ks();
    this.queryz_bq();
    // var a = ["department", "ward", "State_beds"];
    // this.queryG(a);
  }
};
</script>
<style lang="scss">
.BetweenDepartments {
  .keQu .mContent {
    clear: both;
  }

  .keQu .form-group {
    height: 45px;
    padding: 6px 5px 0 10px !important;
  }

  .keQu .mContent .ltList {
    border-right: 1px solid #ddd;
    width: 380px;
    position: absolute;
    top: 90px;
    left: 0;
    bottom: 0;
  }

  .keQu .mContent .ltList .p1 + div {
    overflow-y: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 28px;
    bottom: 0;
  }

  .keQu .mContent .rtList {
    position: absolute;
    top: 90px;
    left: 380px;
    bottom: 0;
    overflow-y: auto;
    right: 0;
  }

  .keQu .mContent .rtList .table {
    width: 600px;
  }

  .keQu .mContent .p1 + div {
    padding: 8px 12px;
  }

  .el-tree-node.is-current > .el-tree-node__content {
    color: #fff;
    background: #155a00 !important;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .uuu {
    background: #d8e7f6 !important;
    position: fixed;
    width: 22px;
    height: 300px;
    left: 570px !important;
    top: 34% !important;
    background: #fff;
    white-space: normal;
    text-align: center;
    padding: 3px;
    margin-top: -51px;
    border: 1px solid #ccc;
    word-break: break-word;
  }
}
</style>
